<template>
	<div id="tios">
		<ul class="tio-content">
			<li v-for="(item, i) in chatList" :key="i">
				<img :src="defaultCover" alt="">
				<div class="tio-chat">
					<div>
						<label>{{item.user.name}}</label>
						<span>{{item.content.time | filterDate}}</span>
					</div>
					<p>{{item.content.chatContent}}</p>
				</div>
			</li>
		</ul>
		<div class="footer" :style="{position:absoluteFixed}">
			<div id="user_face_icon">
				<img :src="defaultCover" alt>
			</div>
			<input id="messageText" @keyup.enter="sendMsg" :placeholder="upplaceholder" type="text" v-model="msg">
			<span id="btn" @click="sendMsg">发送</span>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				defaultCover: require("../../../static/img/defaultHead.png"),
				msg: "",
				chatList: []
			};
		},
		computed: {
			lives() {
				return this.$store.state.liveInfo
			},
			absoluteFixed() {
				return this.$store.state.absoluteFixed
			},
			upplaceholder() {
				var placeholder = "说点什么吧...";
				return placeholder;
			},
			upChat() {
				var chat = "";
				if (this.$store.state.liveInfo.chatSettings == 1) {
					chat = true;
				} else if (this.$store.state.liveInfo.chatSettings == 0) {
					chat = false;
				}
				return chat;
			},
		},
		created() {
			setTimeout(()=>{
				this.getChatList()
			},500)
		},
		filters: {
			filterDate(t) {
				if (t) {
					let myDate = new Date(); //获取当前时间
					let nowTime = myDate.getTime(); //当前时间戳
					let nowyear = myDate.getFullYear(); //当前年份
					nowTime = parseInt(nowTime / 1000); //当前秒数
					let today = myDate.getDate();
					let data = t;
					let year = data.substring(0, 4); //发表评论的年份
					let hm = data.substring(11, 16); //发表评论的时和分
					let md = data.substring(5, 10); //发表评论的月和日
					let otoday = data.substring(8, 10);
					let timestamp = parseInt(new Date(data).getTime()); //发表评论的时间戳
					timestamp = timestamp / 1000; //发表评论的时间秒数
					let timecha = nowTime - timestamp; //时间差
					let yearcha = nowyear - year; //年份差
					let todaycha = today - otoday;
					let showtime = "";
					if (yearcha < 1) {
						if (todaycha == 0) {
							showtime = hm;
						} else {
							showtime = md + " " + hm;
						}
					} else {
						showtime = data;
					}
					return showtime;
				}
			},
		},
		methods: {
			/*获取时间*/
			sendMsgTime() {
				function getNow(s) {
					return s < 10 ? "0" + s : s;
				}
				var myDate = new Date();
				//获取当前年
				var year = myDate.getFullYear();
				//获取当前月
				var month = myDate.getMonth() + 1;
				//获取当前日
				var date = myDate.getDate();
				var h = myDate.getHours(); //获取当前小时数(0-23)
				var m = myDate.getMinutes(); //获取当前分钟数(0-59)
				var s = myDate.getSeconds();
				var now =
					year +
					"-" +
					getNow(month) +
					"-" +
					getNow(date) +
					" " +
					getNow(h) +
					":" +
					getNow(m) +
					":" +
					getNow(s);
				return now;
			},
			sendMsg() {
				var Cid = null;
				var Cindex = 0;
				var Ctype = 0;
				let dataObj = {
					roomId: this.$route.params.id,
					id: Cid,
					index: Cindex,
					type: Ctype,
					content: {
						chatContent: this.msg,
						type: 0,
						status: 0, //0已审核，1未审核
						time: this.sendMsgTime()
					},
					replys: [],
					extra: "",
					user: {
						id: sessionStorage.getItem("userId"),
						name: sessionStorage.getItem("nickname"),
						portrait: ''
					}
				};
				this.$http
					.post(this.$api.replySensorKeyWord(), dataObj, {
						header: {
							"Content-Type": "application/json;charset=UTF-8"
						}
					})
					.then(res => {
						this.msg = ""
						this.getChatList()
					});
			},
			getChatList() {
				let self = this;
				this.$http
					.get(this.$api.getInteractiveChatHistory(), {
						params: {
							type: 1, //1互动聊天，2聊天管控
							roomId: this.$route.params.id
						}
					})
					.then(res => {
						this.chatList = res.data.list.reverse()
						this.$nextTick(function() {
							let div = document.getElementsByClassName("tio-content")[0]
							div.scrollTop = div.scrollHeight;
						})
					});
			},
		}
	};
</script>

<style lang="less" rel=stylesheet/less scoped="scoped">
	#tios {
		width: 100%;
		height: 100%;
		background: #fff;
		position: relative;
		
		.footer {
			// width: 100%;
			height: 40px;
			background: #f8f8f8;
			border-top: 1px solid #f1f1f1;
			bottom: 0;
			padding: 5px;
			display: flex;
			z-index: 10;

			input {
				height: 40px;
				margin: 0 5px;
				outline: none;
				text-indent: 10px;
				border-radius: 6px;
				border: 0;
			}

			span {
				width: 62px;
				height: 40px;
				line-height: 40px;
				cursor: pointer;
				text-align: center;
				border-radius: 6px;
			}
		}
	}

	#user_face_icon {
		width: 35px;
		height: 35px;
		img {
			border-radius: 30px;
			width:35px;
			height: 35px;
		}
	}

	.imgleft {
		width: 40px;
		height: 40px;
		border-radius: 40px;
	}

	.tio-content {
		font-size: 14px;
		width: 100%;
		padding-bottom: 10px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		/*解决ios滚动不流畅*/
		overflow-x: hidden;
		word-break: break-all;
		word-wrap: break-word;

		li {
			padding: 10px;
			display: flex;
			align-items: center;
			.tio-chat {
				width: calc(100% - 45px);
				text-align: left;
				// background: #fafafa;
				padding: 5px 0 5px 10px;
				// border-radius: 10px;
				float: left;
				// margin: 0 10px 0 10px;
				// border: 1px solid #ccc;
				// box-shadow: 0 0 3px #ccc;

				div {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}

				p {
					color: #666;
				}
			}

			img {
				width: 35px;
				height: 35px;
			}

			span {
				color: #999;
				font-size: 12px;
			}
		}
	}
</style>
